<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>重置密码</title>
	<style type="text/css">
		*{margin: 0; padding: 0;}
h1{margin-left: 650px}
.odd{
			margin-left: 530px;
			font-size: 35px;
	margin-top: 140px;
	color:#015668;
		}
		
.even{
	
			margin-left: 535px;
		}
p>input{
			width: 400px;
			height: 50px;
			font-size: 35px;
		}

.denglu{
	width:100px;
	height:45px;
	margin-top:12px;
	margin-left:839px;
	background:#3c70a4;
	color: #d9eeec;
	font-size:27px;

}
		dl{display: none;}
		:target{display: block;}
		a{
			text-decoration:none;
		color:#e8e4e6;
		font-size: 30px}
		#chongzhi{
			width: 100%;
			height: 60px;
			background: #3c70a4;
			color:#f5dea3;
			
		}
		#biaoti{
			width: 130px;
			height: 678px;
			margin-top: 0px;
			margin-left: 0;
			font-size: 40px;
			background:#b18ea6;
		position: absolute;
		}
		.diyiceng{
			width: 125px;
			height: 168px;
			margin-top: -10px;
			background: #d9eeec;
			border-radius: 0 20px 20px 0;
			
		}
			
		.dierceng{
			width: 110px;
			height: 168px;
			margin-top: 10px;
			margin-left: 0px;
			background:#64b2cd;
			border-radius: 0 25px 25px 0;
			font-size: 25px;
			text-align: center;	
		}
		
	.diyiceng:hover{
		background-color: #da9833;
		}
		body{background: #d9eeec;}
		h1{font-size: 42px;}
		
	</style>
</head>

<body>
	<div>
	
		<div id="chongzhi">
	<h1>重&nbsp;置&nbsp;密&nbsp;码</h1>
			</div>
		
		<div id="biaoti">
			
			
			<div class="diyiceng"><!--第一块-->
			<a href="#004"><div class="dierceng"><br><img src="重置密码.png" alt="重置密码"><br>重置密码</div></a>
				</div>
			<hr width="100px">
			
			<div class="diyiceng"><!--第二块-->
		<a href="#001"><div class="dierceng"><br><img src="身份证.png" alt="身份核实"><br>身份核实</div></a>
			</div>
		<hr width="100px">
			
			<div class="diyiceng"><!--第三块-->
		<a href="#002"><div class="dierceng"><br><img src="修改.png" alt="密码修改"><br>密码修改</div></a>
		</div>
		<hr width="100px">
			
			<div class="diyiceng"><!--第四块-->
		<a href="#003"><div class="dierceng"><br><img src="确认.png" alt="确认密码"><br>确认密码</div></a>
		</div>
		</div>
		
		<form method="get" autocomplete="off">
		<dl id="004">
		
		<p class="odd">请输入要重置密码的帐号</p>
		<p class="even"><input type="text" name="email" placeholder="账&nbsp;户"></p>
		
		
		<p class="odd">手机号码</p>
	<p class="even"><input type="text" name="tel" pattern="^\d {11}$\" required placeholder="必&nbsp;须&nbsp;填&nbsp;写"></p>
		
		<p><a href="#001"><input type="button" class="denglu" value="下一步"/></a></p>
				
		</dl>
		
		<dl id="001">
			
	<p class="odd">姓名</p>
	<p class="even"><input type="text" name="rel_name" pattern="^[\u4e00-\ u9fa5]{0,}$\" required placeholder="真&nbsp;实&nbsp;姓&nbsp;名"></p>
	
		
	<p class="odd">身份证号</p>
	<p class="even"><input type="text" name="card" pattern="^\d {8,18}|[0-9x]{8,18}?$\" required placeholder="必&nbsp;须&nbsp;填&nbsp;写"></p>
	<p><a href="#002"><input type="button" class="denglu" value="下一步"/></a></p>
				
		</dl>
		<dl id="002">
		
	<p class="odd">旧密码</p>
	<p class="even"><input type="text" name="old_password" pattern="^\[a-zA-Z\w{5,17}$\" required placeholder="必&nbsp;须&nbsp;填&nbsp;写"></p>
	
		
	<p class="odd">新密码</p>
	<p class="even"><input type="text" name="new_password" pattern="^\[a-zA-Z\w{5,17}$\" required placeholder="必&nbsp;须&nbsp;填&nbsp;写"></p>
	<p><a href="#003"><input type="button" class="denglu" value="下一步"/></a></p>
				
		</dl>
		<dl id="003">
			
	<p class="odd">确认密码</p>
	<p class="even"><input type="text" name="confirm_password" pattern="^\[a-zA-Z\w{5,17}$\" required placeholder="必&nbsp;须&nbsp;填&nbsp;写"></p>
	
		
		<p class="odd">验证码</p>
		<p class="even"><input type="text" name="auth_code " pattern="^\d{6,}" required placeholder="******"></p>
		<p><a href="wanglemimachongshi.html" target="_self"><input type="button" class="denglu" value="确&nbsp认"/></a></p>
				
	</dl>
	</form>
	</div>
</body>
</html>